<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body style="background-color:#2B2A2A; background-repeat:repeat-x; margin-bottom: 50px; margin-left:0px; margin-right:0px;">
<div style="width:100%; background-image: url('graygradinv.png'); background-repeat:repeat-x; height:50px; margin-top:10px; border-top:1px #543F48 solid; border-bottom:1px #543F48 solid; padding-top:15px; padding-left:50px;">
	<img src="lego.png" align="middle" style="position:relative; top:-10px;margin-right:15px;"/><span style="color:#E3B771; font-size:22px; font-weight:bold; font-family:Arial,Helvetica,sans-serif;">web</span><span style="color:#AD8D5A; font-size:22px; font-weight:bold; font-family:Arial,Helvetica,sans-serif;">briques</span>
</div>
<div style="position: relative; left:50%; width:800px; margin-left:-400px;">

    <div class="rounded10" style="float:left; border:5px #543F48 solid; width:46%; margin-top: 30px; margin-bottom: 50px; background-color:#38352F">
    	<div style="color:#FCDFB1; font-size:14px; font-weight:bold; font-family:Arial,Helvetica,sans-serif; padding-left:10px; padding-top:5px;">
      	Autre cadre
      </div>
	    <div style="color:#EEE; padding:10px; font-family:Arial,Helvetica,sans-serif;font-size:12px;">Texte de ce genre de cadre à info.</div>
    </div>
    <div class="rounded10" style="float:right; border:5px #543F48 solid; width:46%; margin-top: 30px; margin-bottom: 50px; background-color:#38352F">
    	<div style="color:#FCDFB1; font-size:14px; font-weight:bold; font-family:Arial,Helvetica,sans-serif; padding-left:10px; padding-top:5px;">
      	Autre cadre
      </div>
	    <div style="color:#EEE; padding:10px; font-family:Arial,Helvetica,sans-serif;font-size:12px;">Texte de ce genre de cadre à info.</div>
    </div>
    
	<div class="rounded10" style="clear:both; width:100%; background-color:#383134;">
      <span style="color:#FFF; font-family:Arial,Helvetica,sans-serif; font-size:12px; padding-left:20px; padding-right:20px">Titre de Section</span>
      <div class="rounded10T" style="background-color:#FFF; background-repeat:repeat-x; width:100%">
    	<div style="color:#222; font-size:20px; font-weight:normal; font-family:Arial,Helvetica,sans-serif;line-height:20px; padding-left:20px; padding-right:20px; margin-top:20px;">Titre d'un grand cadre</div>
        <div style="color:#666; font-size:16px; font-weight:normal; font-family:Arial,Helvetica,sans-serif; padding-left:20px; padding-right:20px; padding-bottom:10px;">Info sur le contenu</div>
	    <div style="color:#FFF; padding:20px; background-color:#543F48; font-family:Arial,Helvetica,sans-serif;font-size:12px;">Style du texte Normal : amet,conadipscingelit.sectetueradipis ngelit.adipiscing elit. Donec vitae leo. Integer<br />Phasellus dui lectus, . Pellentesque molestiepellensque quisPellentesque, molestie sed, tempus eu,nc. Pelle<br />ntesque luctus, convallis at, metus. Nullam lectus mi, consectetuer quis, pellentesque vitae, . Pellentesque tempus sit amet, ante. Pellentesque<br /><br />amet,conadipscingelit.sectetueradipis ngelit.adipiscing elit. Donec vitae leo. Integer<br />Phasellus dui lectus, . Pellentesque molestiepellensque quisPellentesque, molestie sed, tempus eu,nc. Pelle<br />ntesque luctus, convallis at, metus. Nullam lectus mi, consectetuer quis, pellentesque vitae, . Pellentesque tempus sit amet, ante. Pellentesque<br /><br />amet,conadipscingelit.sectetueradipis ngelit.adipiscing elit. Donec vitae leo. Integer<br />Phasellus dui lectus, . Pellentesque molestiepellensque quisPellentesque, molestie sed, tempus eu,nc. Pelle<br />ntesque luctus, convallis at, metus. Nullam lectus mi, consectetuer quis, pellentesque vitae, . Pellentesque tempus sit amet, ante. Pellentesqueamet,conadipscingelit.sectetueradipis ngelit.adipiscing elit. Donec vitae leo. Integer<br />Phasellus dui lectus, . Pellentesque molestiepellensque quisPellentesque, molestie sed, tempus eu,nc. Pelle<br />ntesque luctus, convallis at, metus. Nullam lectus mi, consectetuer quis, pellentesque vitae, . Pellentesque tempus sit amet, ante. Pellentesque</div>
    	</div>
        &nbsp;
    </div>
    
    <div class="rounded10" style="float:left; width:46%; margin-top: 50px; background-color:#5E5647">
    	<div style="color:#FCDFB1; font-size:14px; font-weight:bold; font-family:Arial,Helvetica,sans-serif;line-height:20px; padding:10px">
        	Autre cadre
        </div>
	        <div style="color:#CCCCCC; padding:10px; font-family:Arial,Helvetica,sans-serif;font-size:12px;">Texte de ce genre de cadre à info.</div>
    </div>
    
    <div style="clear:left; float:left; border:1px #543F48 solid; width:46%; margin-top: 50px; background-color:#383134">
    	<div style="color:#FCDFB1; font-size:14px; font-weight:bold; font-family:Arial,Helvetica,sans-serif;line-height:20px; padding:10px">
        	Autre cadre
        </div>
	        <div style="color:#CCCCCC; padding:10px; font-family:Arial,Helvetica,sans-serif;font-size:12px;">Texte de ce genre de cadre à info.</div>
    </div>

    <ul class="rounded10" style=" list-style-type: none;float:right; width:46%; margin-top: 50px; background-color:#543F48">
      <div style="background-color:#5E5647; color:#333; font-size:14px; font-weight:bold; font-family:Arial,Helvetica,sans-serif; padding-left:10px; padding-right:10px; padding-top: 5px; padding-bottom: 5px">
        	Liste d'éléments
      </div>
      <div style="height:5px; border-bottom:#2B2A2A solid 2px;"></div>
      <li style="border-bottom:#2B2A2A solid 2px; color:#FFF; font-size:12px; font-weight:bold; font-family:Arial,Helvetica,sans-serif; padding-left:40px; padding-right:10px; padding-top: 10px; padding-bottom: 10px; background-image:url(battery.png); background-position: 10px center; background-repeat: no-repeat">
        Elément de liste
      </li>
      <li style="border-bottom:#2B2A2A solid 2px; color:#FFF; font-size:12px;">
        <div style=" font-weight:bold; font-family:Arial,Helvetica,sans-serif; padding-left:40px; padding-right:10px; padding-top: 10px; padding-bottom: 10px; background-image:url(input-gaming.png); background-position: 10px center; background-repeat: no-repeat">
          Second élément de liste
        </div>
        <DL style="background-color:#383134; color:#fff; font-family:Arial,Helvetica,sans-serif;font-size:11px; padding-top:10px; padding-bottom:5px; margin-top:0px; margin-bottom:10px; padding-left:0px;">
          <DT style="CLEAR: left;	FLOAT: left;	WIDTH: 35%;	TEXT-ALIGN: right; padding-top:3px">
            <LABEL for="champ1">Premier label : </LABEL>
          </DT>
          <DD style="MARGIN-LEFT: 40%; padding-bottom:5px;">
            <input type="text" style="WIDTH: 100px;	COLOR: #333333; font-size:11px" value="champ1">
          </DD>
          
          <DT style="CLEAR: left;	FLOAT: left;	WIDTH: 35%;	TEXT-ALIGN: right; padding-top:3px">
            <LABEL for="champ1">Second label : </LABEL>
          </DT>
          <DD style="MARGIN-LEFT: 40%; padding-bottom:5px;">
            <input type="text" style="WIDTH: 120px;	COLOR: #333333; font-size:11px" value="champ1">
          </DD>          
          
          <DT style="CLEAR: left;	FLOAT: left;	WIDTH: 35%;	TEXT-ALIGN: right; padding-top:3px">
            <LABEL for="champ1">Label 3 : </LABEL>
          </DT>
          <DD style="MARGIN-LEFT: 40%; padding-bottom:5px;">
            <input type="text" style="WIDTH: 60px; COLOR: #333333; font-size:11px" value="champ1">
          </DD>          
        </DL>
      </li>
      <li style="border-bottom:#2B2A2A solid 2px; color:#FFF; font-size:12px; font-weight:bold; font-family:Arial,Helvetica,sans-serif; padding-left:40px; padding-right:10px; padding-top: 10px; padding-bottom: 10px; background-image:url(network-wired.png); background-position: 10px center; background-repeat: no-repeat">
        Autre élément de liste
      </li>
    </ul>

</div>
<script type="text/javascript" src="../../bibliotheques/jquery-1.2.2.pack.js"></script>
<script type="text/JavaScript" src="../../bibliotheques/jquery.curvycorners.packed.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  
  var rounded7 = { 
    tl: { radius: 7 },
    tr: { radius: 7 },
    bl: { radius: 7 },
    br: { radius: 7 },
    antiAlias: true,
    autoPad: true};
    
 var rounded4 = { 
    tl: { radius: 4 },
    tr: { radius: 4 },
    bl: { radius: 4 },
    br: { radius: 4 },
    antiAlias: true,
    autoPad: true};
  
  var rounded10 = { 
    tl: { radius: 10 },
    tr: { radius: 10 },
    bl: { radius: 10 },
    br: { radius: 10 },
    antiAlias: true,
    autoPad: true};
    
  var rounded10B = { 
    tl: false,
    tr: false,
    bl: { radius: 10 },
    br: { radius: 10 },
    antiAlias: true,
    autoPad: true}; 
  
  var rounded10T = { 
    tl: { radius: 10 },
    tr: { radius: 10 },
    bl: false,
    br: false,
    antiAlias: true,
    autoPad: true,
    validTags: ["div"] }; 

  $(".rounded4").corner(rounded4);
  $(".rounded7").corner(rounded7);
  $(".rounded10").corner(rounded10);
  $(".rounded10B").corner(rounded10B);
  $(".rounded10T").corner(rounded10T);
  
});

</script>
</body>
</html>
